<script setup lang="ts"></script>

<template>
    <div class="main">
        <div class="div_table">
        <table>
            <thead>
                <tr>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>原因</th>
                    <th>人数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>张三</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>李四</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>
                <tr>
                    <td>21级编程班</td>
                    <td>王五</td>
                    <td>生病</td>
                    <td>1/3</td>
                </tr>


            </tbody>
        </table>
</div>
    </div>

</template>
<style scoped>
.div_table{
    width: 100%;
    height: 95%;
    overflow-y: auto;

    &::-webkit-scrollbar{
        width: 8px;
    }
    &::-webkit-scrollbar-track{
        background: white;
        border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb{
        background: #70e0ff;
        border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb:hover{
        background: rgba(250, 184, 2, 0.4);
    }

}
.main{
    background: url(../../images/border.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 50vh;

    padding: 8vh 3vw;
    box-sizing: border-box;
}
table{
    width: 100%;
}
tbody>tr:hover{
    background-color:#70e0ff ;
    color: black !important;
}
th{
    font-size: 1.2vw;
}
td{
    font-size: 0.8vw;
    text-align: center;
}
table,th,td{
    border-collapse: collapse;
    border-collapse: collapse;
    color: white;
}
</style>